<template>
	<div class="system-sysOperLog-detail">
		<el-drawer v-model="isShowDialog"  size="60%" direction="rtl">
			<template #header>
				<h4>{{(ruleForm.id===0?'添加':'修改')+'用户'}}</h4>
			</template>
			<template #default>
				<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.id===0">
							<el-form-item label="用户名" prop="userName">
								<el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.id===0">
							<el-form-item label="账户密码" prop="password">
								<el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="姓名" prop="nickName">
								<el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="关联角色" prop="roleIds">
								<el-select v-model="ruleForm.roleIds" placeholder="请选择" clearable class="w100" multiple>
									<el-option
										v-for="role in roleList"
										:key="role.id"
										:label="role.role_name"
										:value="role.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="部门" prop="deptIds">
								<el-cascader
									:options="deptData"
									:props="{ multiple: true,checkStrictly: true,emitPath: false, value: 'id', label: 'label' }"
									placeholder="请选择部门"
									clearable
									class="w100"
									v-model="ruleForm.deptIds"
								>
									<template #default="{ node, data }">
										<span>{{ data.label }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="手机号" prop="mobile">
								<el-input v-model="ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="性别" prop="sex">
								<el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
									<el-option
										v-for="gender in genderData"
										:key="'gender-'+gender.value"
										:label="gender.label"
										:value="gender.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="岗位" prop="postIds">
								<el-select v-model="ruleForm.postIds" placeholder="请选择" clearable class="w100" multiple>
									<el-option
										v-for="post in postList"
										:key="post.id"
										:label="post.post_name"
										:value="post.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="用户状态">
								<el-switch v-model="ruleForm.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" :disabled="ruleForm.id != 1?0:1"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="用户类型">
								<el-radio-group v-model="ruleForm.userType">
									<el-radio :label="1" >超级管理员</el-radio>
									<el-radio :label="0">普通管理员</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="用户描述">
								<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
			<template #footer>
				<div style="flex: auto">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts">
	import { reactive, toRefs, onMounted, defineComponent,ref,unref } from 'vue';
	import {getParams, addUser, updateAdmin, getEditUser} from "/@/api/system/user";
	import {ElMessage} from "element-plus";


	export default defineComponent({
		name: 'systemEditUser',
		props:{
			deptData:{
				type:Array,
				default:()=>[]
			},
			genderData:{
				type:Array,
				default:()=>[]
			}
		},
		setup(prop,{emit}) {
		const roleList = ref([]);
		const postList = ref([]);
		const formRef = ref<HTMLElement | null>(null);
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					id: 0,
					userName: '',
					nickName: '',
					password: '',
					mobile:'',
					email: '',
					sex: '',
					status: 1,
					remark: '',
					deptIds: [],
					postIds: [],
					roleIds: [],
					userType:0,
				},
				//表单校验
				rules: {
					userName: [
						{ required: true, message: "用户名称不能为空", trigger: "blur" }
					],
					password: [
						{ required: true, message: "密码不能为空", trigger: "blur" },
						{
							pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,20})$/,
							message: "6-20位，需包含字母和数字",
							trigger: "blur"
						}
					],
					nickName: [
						{ required: true, message: "用户昵称不能为空", trigger: "blur" }
					],
					deptId: [
						{ required: true, message: "归属部门不能为空", trigger: "blur" }
					],
					email: [
						{
							type: "email",
							message: "'请输入正确的邮箱地址",
							trigger: ["blur", "change"]
						}
					],
					mobile: [
						{ required: true, message: "手机号码不能为空", trigger: "blur" },
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					]
				}
			});
			// 打开弹窗
			const openDialog = (row?:any) => {
				resetForm()
				if(row) {
					getEditUser(row.id).then((res:any)=>{
						const user = res.data;
						state.ruleForm = {
							id: user.id,
							userName: user.userName,
							nickName: user.nickName,
							password: '',
							mobile:user.mobile,
							email: user.email,
							sex: String(user.sex),
							status: user.status,
							remark: user.remark,
							postIds: user.postIds,
							deptIds: user.deptIds,
							roleIds: user.roleIds,
							userType:user.userType,
						};
					})
				}
				state.isShowDialog = true;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};
			// 新增
			const onSubmit = () => {
				const formWrap = unref(formRef) as any;
				if (!formWrap) return;
				formWrap.validate((valid: boolean) => {
					if (valid) {
						if(state.ruleForm.id===0){
							//添加
							addUser(state.ruleForm).then(()=>{
								ElMessage.success('用户添加成功');
								closeDialog(); // 关闭弹窗
								emit('getUserList')
							});
						}else{
							//修改
							updateAdmin(state.ruleForm).then(()=>{
								ElMessage.success('用户修改成功');
								closeDialog(); // 关闭弹窗
								emit('getUserList')
							});
						}
					}
				});
			};
			// 初始化部门数据
			const initTableData = () => {
				//获取角色岗位选项
				getParams().then((res:any)=>{
					roleList.value = res.data.roleList??[];
					postList.value = res.data.postList??[];
				});
			};
			// 页面加载时
			onMounted(() => {
				initTableData();
			});
			const resetForm = ()=>{
				state.ruleForm = {
					id: 0,
					userName: '',
					nickName: '',
					password: '',
					mobile:'',
					email: '',
					sex: '',
					status: 1,
					remark: '',
					deptIds: [],
					postIds: [],
					roleIds: [],
					userType:0,
				}
			};
			return {
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				roleList,
				postList,
				formRef,
				...toRefs(state),
			};
		},
	});
</script>
<style lang="scss" scoped>
	::v-deep .el-drawer__body {
		padding: 20px;
	}
	::v-deep .el-drawer__footer{
		border-top: 1px solid var(--el-border-color);
		padding: var(--el-drawer-padding-primary);
		padding-top: 20px;
		text-align: left;
		padding-bottom: 20px;
		padding-left: 20px;
	}
</style>	